<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- <input type="" v-for='(value,index) in sing' v-bind:value="value.music"> -->
      <input @click='getBtnVal(item.music)' type="button" v-for='(item,index) in sing' :value="item.music"> <br>
      <!-- 要求点击到相应的按钮内容就会覆盖给span' -->
      <span>{{count}}</span>
    </div>
  </body>
  <!-- 要求遍历生成10个input框,并且内容不一样 -->
  <script>
    let vbn = new Vue({
      el: "#app",
      data: {
        sing: [
          { music: "龙转风" },
          { music: "不能说的密码" },
          { music: "简单爱" },
          { music: "倒带" },
          { music: "双节棍" },
          { music: "霍元甲" },
          { music: "搁浅" },
          { music: "晴天" },
          { music: "七里香" },
          { music: "说好的幸福" }
        ],
        count:'123'//得到span本身就有的值
      },
      methods:{
          getBtnVal(val){
    // 点击事件要求把当前btn的内容添加到span身上
        this.count = val;
          }
      }
    });
  </script>
</html>
